<html>
<head>
    <script language="JavaScript" src="jquery/jquery-3.1.1.min.js" ></script>
    <script language="javascript" src="sum.js" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var $inventory = $('#inventory tbody');
            var quantities = $inventory.find('td:nth-child(2)')
                .map(function (index, qty) {
                    return $(qty).text();
                }).get();
            var sum = $.sum(quantities);
            $('#sum').find('td:nth-child(2)').text(sum);

            var prices = $inventory.find('td:nth-child(3)')
                .map(function (index, qty) {
                    return $(qty).text();
                }).get();
            var average = $.average(prices);
            $('#average').find('td:nth-child(3)').text(average.toFixed(2));
        });
    </script>
</head>
<body>
    <table id="inventory">
        <thead>
            <tr class="one">
                <th>Product</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
        <tfoot>
            <tr class="two" id="sum">
                <td>Total</td> <td></td> <td></td>
            </tr>
            <tr id="average">
                <td>Average</td> <td></td> <td></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td><a href="spam.html" data-tooltip-text="Nutritious and delicious" >Spam</a>
                </td> <td>4</td> <td>2.50</td>
            </tr>
            <tr>
                <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a> </td>
                <td>12</td> <td>4.32</td>
            </tr>
            <tr>
                <td><a href="gourmet0spam.html" data-tooltip-text="Chef Hermann's recipe.">
                    Gourmet Span
                </a> </td> <td>14</td> <td>7.89</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

